为什么

是flex容器?-Whycan't

beflexcontainers?

84  

According to Bug 984869 - display: flex doesn't work for button elements,

根据Bug 984869 - display: flex不适用于按钮元素，

is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that they don't necessarily react in the same way that e.g. a

would.

在纯CSS中不能实现(由浏览器实现)，因此从CSS的角度来看，它们有点像一个黑盒子。这意味着它们的反应不一定像

那样。

This isn't specific to flexbox -- e.g. we don't render scrollbars if you put overflow:scroll on a button, and we don't render it as a table if you put display:table on it.

这并不是flexbox特有的——例如，如果你添加了overflow，我们就不会渲染滚动条:在一个按钮上滚动，如果你添加display:table，我们也不会把它渲染成一个表格。

Stepping back even further, this isn't specific to . Consider

and which also have special rendering behavior:

退一步，这并不是特定于。考虑

和

也具有特殊的渲染行为:

data:text/html,
abc
def

In these cases, Chrome agrees with us and disregards the flex display mode. (as revealed by the fact that "abc" and "def" end up being stacked vertically). The fact that they happen to do what you're expecting on is likely just due to an implementation detail.

在这些情况下，Chrome同意我们的观点，不考虑flex显示模式。(事实表明，“abc”和“def”最终是垂直堆叠的)。它们碰巧执行了您在

上预期的操作，这可能只是由于实现的细节。

In Gecko's button implementation, we hardcode (and

, and ) as having a specific frame class (and hence, a specific way of laying out the child elements), regardless of the display property.

在Gecko的按钮实现中，我们硬编码(和

，和

)作为一个特定的框架类(因此，是一种布局子元素的特定方式)，而不考虑显示属性。

If you want to reliably have the children reliably arranged in a particular layout mode in a cross-browser fashion, your best bet is to use a wrapper-div inside the button, just as you would need to inside of a

or a

.

如果您希望以跨浏览器的方式可靠地将子元素以特定的布局模式排列，最好的方法是在按钮中使用wrapper-div，就像您需要在

中一样。

或